@extends('layouts.back_stage')
@section('content')
    <style>
     ::-webkit-scrollbar {height: 8px;}
    .input-item{width:220px;padding-right: 0;margin-right:10px;}
    .touching{float:right;margin-right:10px;}
    .spTip{width:20px;height:20px;display:inline-block;margin:0 5px 0 20px;}
    .shopBg{background:#fff;overflow: hidden;margin:10px 0 10px 0;}
    .tableBg{padding:20px;background:#fff;margin-top:10px;}
    .pagination_centent{text-align:center;margin-top:10px}
    .el-table--small th {padding:0px}
    .el-form--inline .el-form-item__label {text-align: end;}
    .el-table tr:hover>td{background:initial !important;}
  .el-table tr.current-row>td{background:initial !important;}
  .el-table__expanded-cell[class*=cell]{padding:0 !important;}
  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td, .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{background:initial !important;}
 
    .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-table .warning-row {
    background: #67c34a;
  }

  .el-table .success-row {
    background: #fff;
  }
    </style>
    <div class="container">
        <div style="padding:20px 20px 10px 0;overflow:hidden;"><h3 style="float:left;">采购到货单</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <div class="row app" id="guanLi" v-cloak>
                <el-button type="primary" class="touching"  style="margin-right:40px" size="small" >导出</el-button>
                <el-button type="primary" class="touching"  @click='check' style="margin-right:20px" size="small" >确认</el-button>
                <el-button type="primary" class="touching" @click="addtrans"  size="small" >包码转单据</el-button>
                <el-button type="primary" class="touching" @click="Added" size="small" >新增</el-button>
                <div class="col-md-12 row row-table-box">
                    <div class="shopBg">
                        <div class="row" style="margin-top:10px;padding:9px 30px;background:#fff;">
                            <label>款号所在单据查询：</label>
                            <el-input  class="input-item" v-model="Numbers" placeholder="请输入款号" size="small" prefix-icon="el-icon-search" clearable></el-input>
                            <label>选择时间：</label>
                            <el-date-picker
                                  v-model="time" size="small" type="daterange" range-separator="至" start-placeholder="开始日期"   value-format="yyyy-MM-dd" end-placeholder="结束日期">
                            </el-date-picker>
                            <div style="display:inline-block;padding:10px 0;">
                                <el-button type="primary" style="margin-left:10px" @click='seek' size="small" >搜索</el-button>
                                <el-button  @click="reset" size="small">重置</el-button>
                            </div>
                        </div>
                        </div>
                        <div class="tableBg borderBg">
                        <p style="height:20px;line-height:20px;display: inline-flex;float: right;">
                            <span class="spTip" style="background:#fff;border:1px solid #ccc"></span>未确认入库
                            <!-- <span class="spTip" style="background:#ccc;"></span>已完成入库 -->
                            <span class="spTip" style="background:#67c34a;"></span>已确认入库
                        </p>
                           <template>
                              <el-table :data="tableData1"  size="small"   @filter-change="filterTag" :row-class-name="tableRowClass"  :resizable='false' @cell-click="tableRowClassName"   @selection-change="handleSelectionChange" border style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="制单人">
            <span>@{{ props.row.created_by }}</span>

          </el-form-item>
          <el-form-item label="制单时间">
            <span>@{{ props.row.created_at }}</span>
          </el-form-item>
          <el-form-item label="确认人">
            <span>@{{ props.row.confirmed_by }}</span>
          </el-form-item>
          <el-form-item label="确认时间">
            <span>@{{ props.row.confirmed_at }}</span>
          </el-form-item>
          <el-form-item label="审核人">
            <span>@{{ props.row.verified_by }}</span>
          </el-form-item>
          <el-form-item label="审核时间">
            <span>@{{ props.row.verified_at }}</span>
          </el-form-item>
           <el-form-item label='备注'>
            <span>@{{ props.row.remark }}</span>
          </el-form-item>
          <!-- <el-form-item label="修改时间">
            <span>@{{ props.row.created_at }}</span>
          </el-form-item>  -->
        </el-form>
      </template>
    </el-table-column>
                                <el-table-column type="selection" :resizable='false' align="center" width="45"> </el-table-column>
                                <el-table-column  label="单据类型" :resizable='false' align="center" prop="cilen"> </el-table-column>
                                <el-table-column label="单据号"  :resizable='false'  align="center" prop="no"> </el-table-column>
                                <el-table-column  label="供应商"  :resizable='false' align="center" prop="supplied_by">  </el-table-column>
                                <el-table-column  align="center" :resizable='false' label="收货仓库"
                                     column-key="warehouse" :filters="entrepot"
                                 prop="warehouse"> </el-table-column>
                                <el-table-column  align="center"  :resizable='false' label="数量"  prop="founder_id"> </el-table-column>
                                <el-table-column  align="center"  :resizable='false'  label="审核状态"
                                     column-key="verified_at" :filters="[{ text: '未审核', value: '2' }, { text: '已审核', value: '1' }]"
                                 prop="status_a"> 
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.status_a===0">未审核</span>
                                        <span v-if="scope.row.status_a===1">已审核</span>
                                    </template>
                                  </el-table-column>
                                
                                  <el-table-column  align="center" :resizable='false' label="确认状态"
                                     column-key="confirmed_at" :filters="[{ text: '未确认', value: '2' }, { text: '已确认', value: '1' }]"
                                 prop="status_b "> 
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.status_b===0">未确认</span>
                                        <span v-if="scope.row.status_b===1">已确认</span>
                                    </template>
                                  </el-table-column>

                                <el-table-column align="center" :resizable='false' label="扫描状态"  
                                    column-key="scaned_at" :filters="[{ text: '未扫描', value: '2' }, { text: '已扫描', value: '1' }]"
                                prop="status_c">
                                <template slot-scope="scope">
                                        <span v-if="scope.row.status_c===0">未扫描</span>
                                        <span v-if="scope.row.status_c===1">已扫描</span>
                                    </template>                              
                                 </el-table-column>
                                 <el-table-column
                                    fixed="right"
                                    label="操作" align="center" :resizable='false'
                                    width="100">
                                    <template slot-scope="scope">
                                        <el-button  v-if="scope.row.status_b===0" type="text" @click="updata(scope)" size="small">修改</el-button>
                                        <el-button  type="text" @click="look(scope)" size="small">查看</el-button>
                                    </template>
                                    </el-table-column>
                              </el-table>
                            </template>
                            <div class="pagination_centent">
                              <el-pagination background  layout="prev, pager, next" @current-change="handleCurrentChange"  :total="total"> </el-pagination>                            
                            </div>
                        </div>  
                        
                        <div class="tableBg borderBg">
                              <el-tabs type="border-card">
                                <el-tab-pane label="单据明细">
                                <el-table :data="tableData2" border  :resizable='false' size="small"  style="width: 100%">
                                      <el-table-column prsop="year" align="center" :resizable='false' label="年份" width="70"  >  </el-table-column>
                                      <el-table-column prop="season"  :resizable='false'  align="center" label="季节" width="60"> </el-table-column>
                                      <el-table-column prop="species"  :resizable='false'  align="center" label="类型" width="100" > </el-table-column>
                                      <el-table-column  prop="girard" :resizable='false'  align="center" label="款号" width="100" > </el-table-column>
                                      <el-table-column prop="color"  :resizable='false' align="center" label="颜色" width="60" >  </el-table-column>
                                      <el-table-column  prop="price" :resizable='false'  align="center"  label="吊牌价" width="80" ></el-table-column>
                                      <el-table-column v-for="(item ,index) in sizeGr"  :key="index"  :label="item.key76" width="70" align="center" :resizable='false'>
                                      <el-table-column v-for="(item ,index) in sizeGr"  :key="index"  :label="item.key76" width="70" align="center" :resizable='false'>
                                      <el-table-column v-for="(item ,index) in sizeGr"  :key="index"  :label="item.key76" width="70" align="center" :resizable='false'>
                                <el-table-column :label="item.key75" width="70" :resizable='false' align="center" >
                                    <el-table-column :label="item.key79" width="70" :resizable='false' align="center" >
                                        <el-table-column :label="item.key154" width="70" :resizable='false'  align="center">
                                            <el-table-column :label="item.key146" width="70" :resizable='false'  align="center">
                                                <el-table-column :label="item.key161" width="70" :resizable='false'  align="center">
                                                    <el-table-column :label="item.key77" width="70" :resizable='false'  align="center">
                                                        <el-table-column :prop="item.key_0" :label="item.key140" width="70" :resizable='false'  align="center"></el-table-column>
                                                    </el-table-column>
                                                </el-table-column>
                                            </el-table-column>
                                        </el-table-column>
                                    </el-table-column>
                                </el-table-column>
                            </el-table-column>
                            </el-table-column>
                                </el-tab-pane>
                                <el-tab-pane label="单据清单">
                                    <el-table :data="tableData3"  border style="width: 100%">
                                      <el-table-column type="index"  :resizable='false' label="序号" align="center" width="60"> </el-table-column>
                                      <el-table-column prop="girard"  :resizable='false' label="型号" align="center" > </el-table-column>
                                      <el-table-column prop="year" :resizable='false'  label="年份" align="center" width="100"> </el-table-column>
                                      <el-table-column prop="season" :resizable='false' label="季节" align="center" width="100"> </el-table-column>
                                      <el-table-column prop="cate"  :resizable='false' label="类型" align="center" width="80"> </el-table-column>
                                      <el-table-column prop="color"  :resizable='false' label="颜色" align="center" width="80"> </el-table-column>
                                      <el-table-column prop="price"  :resizable='false' label="吊牌价" align="center" width="100"> </el-table-column>
                                      <el-table-column prop="size"  :resizable='false'label="尺寸" align="center" width="80"> </el-table-column>
                                      <el-table-column prop="code"  :resizable='false' align="center" label="服装条码"> </el-table-column>
                                      <el-table-column prop="founder"  :resizable='false'  align="center" label="扫描人" width="80"> </el-table-column>
                                      <el-table-column prop="year" :resizable='false' label="扫描时间" align="center" > </el-table-column>
                                    </el-table>
                                </el-tab-pane>
                              </el-tabs>
                        </div>  
                        
                    </div>
                  
            </div>
        </div>
        <!-- /主体-->
    </div>

    <script>
        new Vue({
            el: '#guanLi',
            data:{
              sizeGr:[],
              total:1,//
              tabid1:'',//点击tab1 行id
              current_page:1,//
              tableData1: [],
              tableData2:[],
              tableData3: [],
              entrepot:[],//仓库下拉
              warehouse:'',//仓库下拉搜索
              status_a:'',//审核状态搜索
              status_b:'',//确认状态搜索
              status_c:'',//扫描状态搜索
              time:'',//时间搜索
              Numbers:'',//款号搜索
              verified_at:'',
              scaned_at:'',
              confirmed_at:'',
            chengId:[],//idtea1
            chengStatus_a:[],//status tea1
            chengStatus_b:[],//status tea1
            chengStatus_c:[],//status tea1
            },
            created(){
               
            },
            mounted(){
               this.common();
               this.request();
               this.demand();
            },
            methods:{
                //查看
                look(scope){
                    window.location.href=`/distribute/deliver/display/${scope.row.id}`;     
                },
                //修改
                updata(scope){
                 // console.log(scope.row)
                 window.location.href=`/distribute/deliver/edit/${scope.row.id}`;        
                },
                //tab1 行的颜色
                tableRowClass({row, rowIndex}) {
                        if (row.status_b === 1) {
                        return 'warning-row';
                        } else if (row.status_b ===0) {
                        return 'success-row';
                        }
                        return '';
                    },
                //tab1多选框的id
                handleSelectionChange(val){
                    this.chengId=[]
                    this.chengStatus_a=[]
                    this.chengStatus_b=[]
                    for(var w in val){
                        this.chengId.push(val[w].id)
                        this.chengStatus_a.push(val[w].status_a)
                        this.chengStatus_b.push(val[w].status_b)
                        this.chengStatus_c.push(val[w].status_c)
                    }
                },
                //确认
                check(){
                    let that=this
                    if(this.chengId==''){
                        this.$notify.error({
                                title: '提示',
                                message: '请选择你要确认的项',
                            });
                            return false;
                     } 
                     if(this.chengId.length==1){
                         if(this.chengStatus_b==1){
                            this.$notify.error({
                                title: '提示',
                                message: '你选择的项已经确认了',
                            });
                         }else{
                            $.ajax({
                              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                                type:'post',
                                url:'/distribute/deliver/confirm',
                                dataType:'json',
                                data:{
                                    id:this.chengId
                                },
                             }).then(function(res){
                                if(res.result.success==true){
                                    that.$notify.success({
                                        title: '提示',
                                        message: '确认提交成功',
                                    });
                                    that.request();
                                }else{
                                    that.$notify.error({
                                            title: '提示',
                                            message: res.result.errorMsg,
                                      }); 
                                }
                            })
                         }
                     }else{
                        for(var i in that.chengStatus_b){
                            if(that.chengStatus_b[i]==1){
                               that.$notify.error({
                                title: '提示',
                                message: '你选择的项有已经确认了',
                             });
                             return false;
                           } 

                        } 
                        for(var e in that.chengStatus_b){
                            if(that.chengStatus_b[i]==0){
                                $.ajax({
                                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                                        type:'post',
                                        url:'/distribute/deliver/confirm',
                                        dataType:'json',
                                        data:{
                                            id:this.chengId
                                        },
                                    }).then(function(res){
                                        if(res.result.success==true){
                                            that.$notify.success({
                                                title: '提示',
                                                message: '确认提交成功',
                                            });
                                           that.request();
                                        }else{
                                            that.$notify.error({
                                                    title: '提示',
                                                    message: res.result.errorMsg,
                                            }); 
                                        }
                                    })
                            }
                            return false;
                        }
                     }
                },
              //重置
              reset(){
                    this.time=''
                    this.Numbers=''
                    this.request(); 
              },
              // 点击搜索
              seek(){
                 if(this.Numbers=='' &&  this.time==''){
                        this.$notify.error({
                                title: '警告',
                                message: '请输入款号单据 或 时间',
                               
                                });
                            return false;
                    }
                    this.request(); 
              },
               //对话框弹出时请求仓库
               demand(){
                let that=this
                 $.ajax({
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        type:'get',
                        url:'/distribute/warehouse/index',
                        dataType:'json',
                    }).then(function(res){
                        that.opt=res.content
                        for(var e in that.opt){
                            that.entrepot.push({
                                text:that.opt[e].type,
                                value:that.opt[e].id,
                            })
                        }
                    })
               },
             //点击tab下拉
             filterTag(value){
               if(value.warehouse!=undefined){
                        var val1=value.warehouse;
                        var stas1='';
                        for(let i=0; i<val1.length;i++){
                            stas1=stas1+val1[i]+',';
                        } 
                        this.warehouse=stas1.substr(0, stas1.length - 1); 
                        this.request(); 
                    }
                if(value.confirmed_at!=undefined){
                        var val1=value.confirmed_at;
                        var stas1='';
                        for(let i=0; i<val1.length;i++){
                            stas1=stas1+val1[i]+',';
                        } 
                        this.confirmed_at=stas1.substr(0, stas1.length - 1);
                        this.request(); 
                    }
                    if(value.scaned_at!=undefined){
                        var val1=value.scaned_at;
                        var stas1='';
                        for(let i=0; i<val1.length;i++){
                            stas1=stas1+val1[i]+',';
                        } 
                        this.scaned_at=stas1.substr(0, stas1.length - 1);
                        this.request(); 
                    }
                    if(value.verified_at!=undefined){
                        var val1=value.verified_at;
                        var stas1='';
                        for(let i=0; i<val1.length;i++){
                            stas1=stas1+val1[i]+',';
                        } 
                        this.verified_at=stas1.substr(0, stas1.length - 1);
                        this.request(); 
                    }
             },
            //点击tab1获得行的id
            tableRowClassName(row){
              let that=this
                    var tab2=[]
                    var tab3=[]
                    $.ajax({
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                            type:'get',
                            url:`/distribute/deliver/statistic/${row.id}`,
                            dataType:'json',
                        }).then(function(res){
                            for(var e in res.content.goods){
                                tab3.push({
                                      'year':res.content.goods[e].year,
                                      'season':res.content.goods[e].season,
                                      'cate':res.content.goods[e].cate,
                                      'color':res.content.goods[e].color,
                                      'price':res.content.goods[e].price,
                                      'size':res.content.goods[e].size,
                                      'code':res.content.goods[e].code,
                                      'founder':res.content.goods[e].founder,
                                      'year':res.content.goods[e].year,
                                      'girard':res.content.goods[e].girard,
                                })
                            }
                            that.tableData3=tab3
                            if(res.content.item!=''){
                                 for(var k in res.content.item){
                                    if(res.content.item[k].price.length!=1){
                                        res.content.item[k].price=res.content.item[k].price[0]+'/'+res.content.item[k].price[1]
                                    }
                                    for(var e in res.content.item[k].bsize){
                                        if(res.content.item[k].bsize[e]==0){
                                            res.content.item[k].bsize[e]=''
                                        }
                                    }
                                     tab2.push({
                                         'year':res.content.item[k].year,
                                         'season':res.content.item[k].season,
                                         'species':res.content.item[k].species,
                                         'girard':res.content.item[k].girard,
                                         'price':res.content.item[k].price,
                                         'size_group':res.content.item[k].cate,
                                          'color':res.content.item[k].colorr,
                                         'num':res.content.item[k].bsize
                                    
                                     })
                                 }     
                               that.tableData2=tab2
                             //  console.log(that.tableData2)
                            }
                        })
            },
                 //点击页数
              handleCurrentChange(val){
                    this.current_page=val
                    this.request();
                },
                /*尺码数据*/
                common(){
                    var that=this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/sizeGroupHead',
                        data: {
                            type:1,
                        },
                        success: function (data) {
                            if(data.result.success){
                                that.sizeGr=data.content.vertical;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                request(){
                  let that=this
                    var list=[]
                    var status_a1=''
                    var status_b1=''
                    var status_c1=''
                    let number
                        $.ajax({
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        type:'get',
                        url:'/distribute/deliver/index',
                        dataType:'json',
                        data:{
                          current_page:this.current_page,
                          warehouse:this.warehouse,//仓库下拉搜索
                          verified:this.verified_at,//审核状态搜索
                          scaned:this.scaned_at,//扫描状态搜索
                          confirmed:this.confirmed_at,//扫描状态搜索
                          time:this.time,//时间搜索
                          numbers:this.Numbers,//款号搜索

                        }
                    }).then(function(res){
                      //  console.log(res)
                       res.content.current_page=that.current_page,
                       that.total=res.content.total
                        for(var e in res.content.data){
                          
                            if(res.content.data[e].scaner==null){
                              res.content.data[e].scaner={
                                  id:94,
                                  admin_name:''
                               }
                            }
                            if(res.content.data[e].warehouse==null){
                                res.content.data[e].warehouse='' 
                            }
                            if(res.content.data[e].verified_at==null ||  res.content.data[e].verified_at==-1){
                                status_a1=0
                            }else{
                                status_a1=1
                            }
                            if(res.content.data[e].confirmed_at==null || res.content.data[e].confirmed_at==-1){
                                status_b1=0
                            }else{
                                status_b1=1
                            }
                             if(res.content.data[e].scaned_at==null || res.content.data[e].scaned_at==-1 ){    
                                status_c1=0
                            }else{
                                status_c1=1
                            }
                            if(res.content.data[e].verified_by==null || res.content.data[e].verified_by==-1){
                                res.content.data[e].verified_by=''
                            }
                            if(res.content.data[e].confirmed_by==-1){
                                res.content.data[e].confirmed_by=''
                            }
                            if(res.content.data[e].stocks==null){
                                number=''
                            }
                            for(var w in res.content.data[e].stocks){
                                number=res.content.data[e].stocks[w].number
                                
                            }
                          list.push({
                            'cilen':'到货单',
                            'no':res.content.data[e].no,
                            'warehouse':res.content.data[e].warehouse.type,
                            'founder_id':number,
                            'created_at':res.content.data[e].created_at,
                            'status_a':status_a1,
                            'status_b':status_b1,
                            'status_c':status_c1,
                            'scaner':res.content.data[e].scaner.admin_name,
                            'id':res.content.data[e].id,
                            'supplied_by':res.content.data[e].supplied_by,
                            'verified_at':res.content.data[e].verified_at,
                            'verified_by':res.content.data[e].verified_by,
                            'scaned_at':res.content.data[e].scaned_at,
                            'scaned_by':res.content.data[e].scaned_by,
                            'confirmed_at':res.content.data[e].confirmed_at,
                            'confirmed_by':res.content.data[e].confirmed_by,
                            'remark':res.content.data[e].remark,
                            'created_at':res.content.data[e].created_at,
                            'created_by':res.content.data[e].created_by
                          })
                        }
                        that.tableData1=list
                        console.log(list)
                    })
                },
                // 包码转单据
                addtrans(){
                  window.location.href=`/distribute/deliver/transform`;
                },
                //新增
                Added(){
                   window.location.href=`/distribute/deliver/create`;
                },
            }
        });
    </script>
@endsection